<template>

  <head>
    <meta name="referrer" content="no-referrer">
  </head>
  <div class="knowledge-container">
    <div class="top-header">
      <div class="title-wrapper">
        <svg data-v-b0f5b129="" class="vui_icon channel-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"
          width="36" height="36" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path
            d="M16.971 3.352335C19.4169 3.346005 21.798000000000002 4.13829 23.75235 5.608815C25.706849999999996 7.079325 27.1278 9.147675 27.799350000000004 11.49954C28.4709 13.851405 28.356299999999997 16.358249999999998 27.473100000000002 18.639C26.7024 20.628899999999998 25.38345 22.351950000000002 23.677799999999998 23.61315C23.211599999999997 23.958 22.90575 24.489 22.90575 25.068749999999998L22.90575 26.387999999999998C22.89255 26.72295 22.90575 27.6432 22.90575 27.6432C22.90575 27.6432 21.44265 27.88935 20.78175 27.88935C20.12085 27.88935 12.99945 27.88935 12.99945 27.88935C12.354855 27.88935 10.89522 27.5574 10.89522 27.5574C10.89522 27.5574 10.89522 26.061149999999998 10.89522 25.4097L10.89522 25.04955C10.89522 24.480150000000002 10.600064999999999 23.957099999999997 10.147604999999999 23.6115C8.46387 22.32555 7.170764999999999 20.5872 6.425025000000001 18.591C5.57241 16.308600000000002 5.48109 13.811744999999998 6.1647300000000005 11.47323C6.848355 9.13473 8.27022 7.080150000000001 10.217925000000001 5.61645C12.165644999999998 4.15275 14.53464 3.3585 16.971 3.352335z"
            fill="#FF8834ff"></path>
          <path
            d="M18.17925 18.78855C18.54945 18.78855 18.8496 18.4884 18.8496 18.118199999999998L18.8496 17.045849999999998C18.8496 16.67565 19.14975 16.3755 19.519949999999998 16.3755L20.45835 16.3755C21.9228 16.3755 22.0671 15.533850000000001 22.0671 15.034799999999999L22.0671 10.07025C22.0671 9.343905 21.526500000000002 8.72964 20.45835 8.72964L13.75527 8.72964C12.43236 8.72964 11.878425 9.392985 11.878425 10.07025L11.878425 12.75684C11.878425 13.126484999999999 12.178065 13.42614 12.54771 13.42614L14.426594999999999 13.42614C14.796225 13.42614 15.09585 13.126484999999999 15.09585 12.75684L15.09585 11.951475C15.09585 11.581275000000002 15.395999999999999 11.28117 15.7662 11.28117L18.17925 11.28117C18.54945 11.28117 18.8496 11.581275000000002 18.8496 11.951475L18.8496 14.36457C18.8496 14.734770000000001 18.54945 15.034799999999999 18.17925 15.034799999999999L17.240850000000002 15.034799999999999C15.3399 15.0171 14.827755 15.801749999999998 14.827755 16.3755L14.827755 18.118199999999998C14.827755 18.4884 15.1278 18.78855 15.498000000000001 18.78855L18.17925 18.78855zM16.88055 19.5594C17.251649999999998 19.5594 17.61465 19.6695 17.9232 19.87575C18.2319 20.082 18.4725 20.3751 18.61455 20.718C18.7566 21.061049999999998 18.79365 21.438299999999998 18.72135 21.802500000000002C18.6489 22.16655 18.4701 22.5009 18.2076 22.763399999999997C17.9451 23.0259 17.610750000000003 23.2047 17.2467 23.277C16.88265 23.34945 16.50525 23.31225 16.162200000000002 23.1702C15.819300000000002 23.02815 15.5262 22.7877 15.31995 22.479C15.113699999999998 22.1703 15.003599999999999 21.80745 15.003599999999999 21.43635C15.003599999999999 20.938499999999998 15.20145 20.46105 15.55335 20.10915C15.9054 19.7571 16.3827 19.5594 16.88055 19.5594z"
            fill="#FFE8AFff"></path>
          <path
            d="M11.417895 28.662300000000002C11.340615 28.240049999999997 11.693069999999999 27.889499999999998 12.122399999999999 27.889499999999998L21.826050000000002 27.889499999999998C22.25535 27.889499999999998 22.60785 28.240049999999997 22.5306 28.662300000000002C22.35 29.64945 21.83895 30.68085 21.057750000000002 31.341150000000003C20.06805 32.1777 18.7257 32.647800000000004 17.326050000000002 32.647800000000004L16.6224 32.647800000000004C15.222750000000001 32.647800000000004 13.88043 32.1777 12.890729999999998 31.341150000000003C12.1095 30.68085 11.598495 29.64945 11.417895 28.662300000000002z"
            fill="#00B9E7ff"></path>
          <path
            d="M9.80694 26.86365C9.80694 26.1042 10.422525 25.488599999999998 11.181885 25.488599999999998L22.4667 25.488599999999998C23.226 25.488599999999998 23.8416 26.1042 23.8416 26.86365L23.8416 27.1137C23.8416 27.873 23.226 28.488599999999998 22.4667 28.488599999999998L11.181885 28.488599999999998C10.422525 28.488599999999998 9.80694 27.873 9.80694 27.1137L9.80694 26.86365z"
            fill="#FFD671ff"></path>
          <path
            d="M30.433500000000002 4.9230599999999995C30.5175 4.736235000000001 30.7827 4.736235000000001 30.86685 4.9230599999999995L31.288800000000002 5.860725C31.6779 6.7254000000000005 32.31075 7.45782 33.1098 7.9682699999999995L33.4005 8.15397C33.59565 8.278545 33.59565 8.563410000000001 33.4005 8.687985000000001L33.12315 8.865195C32.3157 9.38094 31.6782 10.123185 31.2903 10.99917L30.867449999999998 11.95398C30.783900000000003 12.142515 30.5163 12.142515 30.432899999999997 11.95398L30.030900000000003 11.046375000000001C29.62995 10.140975000000001 28.9626 9.379169999999998 28.11795 8.862375L27.838350000000002 8.69124C27.6363 8.56767 27.6363 8.274284999999999 27.838350000000002 8.150715L28.13145 7.971299999999999C28.9677 7.45965 29.630249999999997 6.70773 30.03255 5.813715L30.433500000000002 4.9230599999999995z"
            fill="#FFD671ff"></path>
        </svg>
        <h2>知识</h2>
      </div>
      <!-- <a href="#" class="creator-plan">三谋×知识区 创作者激励计划 >></a> -->
    </div>

    <div class="content-row">
      <!-- 轮播图 - 左侧 -->
      <div class="lunbu">
        <el-carousel :interval="3000" indicator-position="inside">
          <el-carousel-item v-for="(item, index) in images" :key="index">
            <div class="carousel-content">
              <img :src="item.url" class="carousel-image" alt="">
              <div class="carousel-text">

                <h3>{{ item.subtitle }}</h3>
                <span class="activity-tag">{{ item.tag }}</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 视频列表 - 右侧 -->
      <div class="video-list">
        <div v-for="(item, index) in videos" :key="index" class="video-item" @mouseenter="showPreview(index)"
          @mouseleave="hidePreview(index)">
          <div class="video-cover">
            <img :src="item.cover" alt="视频封面">
            <div class="play-count">
              <i class="el-icon-video-play"></i>
              <span>{{ item.playCount }}</span>
            </div>
            <div class="duration">{{ item.duration }}</div>
          </div>

          <div class="video-preview" v-show="item.showPreview">
            <video :src="item.previewUrl" autoplay muted loop></video>
          </div>

          <div class="video-info">
            <h3 class="video-title">{{ item.title }}</h3>
            <div class="up-info">
              <span class="up-name">{{ item.upName }}</span>
              <span class="up-fans">{{ item.fans }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const images = [
  {
    url: 'https://i0.hdslb.com/bfs/app/f5be5c2d1e3262d043bd310b5261e77993df7e23.jpg@780w_230h_1c.avif',
    // title: '成为',
    subtitle: '寒沙自己的夫人',
    tag: '《bilibili心理健康月5.1-6.30》'
  },
  {
    url: 'https://i0.hdslb.com/bfs/app/16beb8e9e4899d6366f51a1df29c443212ceb41d.jpg@780w_230h_1c.avif',
    // title: '投稿心理内容',
    subtitle: '投稿心理内容瓜分千万流量',
    tag: '《bilibili心理健康月5.1-6.30》'
  },
  {
    url: 'https://i0.hdslb.com/bfs/app/d7e88adf9ede8d37fda86213b24daf018aa7e0cc.jpg@780w_230h_1c.avif',
    // title: '心理健康',
    subtitle: '心理健康关注你的内心世界',
    tag: '《bilibili心理健康月5.1-6.30》'
  },
  {
    url: 'https://i0.hdslb.com/bfs/app/e13c258dc1e93b3fcaab7b771892133ba7030266.png@780w_230h_1c.avif',
    // title: '心理知识',
    subtitle: '心理知识学习心理小技巧',
    tag: '《bilibili心理健康月5.1-6.30》'
  },
];

const videos = ref([
  {
    cover: 'https://i1.hdslb.com/bfs/archive/6d24123eca3a2e5848d0a9abe5c2c3e1c780d68e.jpg@760w_428h_1c.avif',
    previewUrl: 'blob:https://www.bilibili.com/01495bc8-05b4-4e20-baa2-38c35cc1fb28',
    title: '上班要学会把领导当狗养',
    playCount: '174.4万',
    duration: '9:21',
    upName: '夏晓华/玩转职场',
    fans: '05-21',
    showPreview: false
  },
  {
    cover: 'https://i0.hdslb.com/bfs/archive/6860072e35493018b8dd26447b52b8c769e01fd1.jpg@760w_428h_1c.avif',
    previewUrl: 'blob:https://www.bilibili.com/a886fe97-93ba-4a54-bc34-20ea610ce1d4',
    title: '物理与数学7',
    playCount: '87.2万',
    duration: '15:42',
    upName: '科普宇宙',
    fans: '04-08',
    showPreview: false
  },


]);

const showPreview = (index) => {
  videos.value[index].showPreview = true;
};

const hidePreview = (index) => {
  videos.value[index].showPreview = false;
};
</script>

<style lang="scss" scoped>
.knowledge-container {
  width: 100%;
  padding: 15px;
  margin: 0 auto;

  .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .title-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;

      h2 {
        font-size: 24px;
        font-weight: bold;
        margin: 0;
      }
    }

    .creator-plan {
      color: #fb7299;
      font-size: 14px;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .content-row {
    display: flex;
    gap: 20px;

    .lunbu {
      flex: 1;
      min-width: 0;
      // height: 400px;

      .el-carousel {
        border-radius: 8px;
        overflow: hidden;
        height: 260px;

        :deep(.el-carousel__indicator) {
          padding: 8px 5px;

          .el-carousel__button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
          }

          &.is-active .el-carousel__button {
            background-color: white;
            width: 12px;
          }
        }

        .carousel-content {
          position: relative;
          width: 100%;
          height: 100%;

          .carousel-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .carousel-text {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
            white-space: nowrap;

            /* 新增：强制不换行 */
            h3 {
              font-size: 22px;
              margin: 0 0 8px 0;
              font-weight: bold;
              text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

            }

            // p {
            //   font-size: 16px;
            //   margin: 0 0 8px 0;
            //   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

            // }

            .activity-tag {
              display: inline-block;
              background-color: rgba(255, 255, 255, 0.2);
              padding: 4px 8px;
              border-radius: 4px;
              font-size: 12px;
              backdrop-filter: blur(5px);
            }
          }
        }
      }
    }

    .video-list {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      min-width: 0;

      .video-item {
        position: relative;
        cursor: pointer;
        width: 300px;

        .video-cover {
          position: relative;
          border-radius: 4px;
          overflow: hidden;
          aspect-ratio: 16/9;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
          }

          .play-count,
          .duration {
            position: absolute;
            color: white;
            font-size: 12px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 2px 6px;
            border-radius: 4px;
          }

          .play-count {
            bottom: 5px;
            left: 5px;
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }

          .duration {
            bottom: 5px;
            right: 5px;
          }
        }

        .video-preview {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 10;
          border-radius: 4px;
          overflow: hidden;

          video {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .video-info {
          margin-top: 8px;

          .video-title {
            font-size: 14px;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
            height: 40px;
          }

          .up-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
            margin-top: 5px;
          }
        }

        &:hover {
          .video-cover img {
            transform: scale(1.05);
          }
        }
      }
    }
  }
}
</style>
